<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>多人聊天室</title>

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600" rel="stylesheet">

    <link type="text/css" rel="stylesheet" th:href="@{/plugin/news/css/reset.min.css}"/>
    <link type="text/css" rel="stylesheet" th:href="@{/plugin/news/css/style.css}"/>
    <link type="text/css" rel="stylesheet" th:href='@{/css/scroll.css}' />


</head>
<style>
    #message {
        background-color: #dad6d6;
        overflow:scroll;
        overflow-x: hidden;
        position: relative;
        float: left;
        height: 150px;
        width: 100%;
    }
</style>
<body>

  <div class="wrapper">
    <div class="container">
        <div class="right">
            <div class="top"><span>To: <span class="name">Dog Woofson</span></span></div>
            <div class="chat active-chat" data-chat="person1">
                <div class="conversation-start">
                    <span>Today, 6:48 AM</span>
                </div>
                <div class="bubble you">
                    Hello,
                </div>
                <div class="bubble you">
                    it's me.
                </div>
                <div class="bubble you">
                    I was wondering...
                </div>
            </div>
            <div class="write">
                <a href="javascript:;" class="write-link attach"></a>
                <a href="javascript:;" class="write-link smiley"></a>
            </div>
                <textarea id="message"></textarea>


            <div style="height:20px;width: 100%;">
            </div>
            </div>
        </div>
    </div>
</div>

</body>
<script language='JavaScript' th:src='@{/plugin/jQuery/jQuery-2.2.0.min.js}'></script>

<script>
$("message").focus();

</script>
</html>
